<script setup>
import {setCurrentWallpaper} from '@/api/user'
import { useHomeStore } from "@/stores/home";
import {Plus} from '@element-plus/icons-vue';
const store = useHomeStore();

/**
 * 切换壁纸
 * @param item 点击的壁纸项
 */
const handleChangeWallpaper = (item) => {
  store.changeWallpaper(item);
};

/**
 * 切换动态壁纸
 * @param item 点击的壁纸项
 */
const handleLiveWallpapers = (item) => {
  store.LiveWallpapers(item);
};

/**
 * 处理点击壁纸事件
 * @param index
 * @param type
 */
const handleClickWallpaper = (index, type) => {
  const url = `${type}://${index}`
  store.currentWallpaperUrl = url
  setCurrentWallpaper(url).then(res => {
    if (res.code === 20000) {
      ElMessage({
        showClose: true,
        message: "壁纸切换成功",
        type: "success",
      })
    } else {
      ElMessage.error(res.message)
    }
  })
}

/**
 * 壁纸上传之前的事件
 * @param rawFile
 * @returns {boolean}
 */
const beforeWallpaperUpload = rawFile => {
  if (!rawFile.type.startsWith('image')) {
    ElMessage.error('壁纸只能上传图片格式，请选择图片哦')
    return false
  } else if (rawFile.size / 1024 / 1024 > 4) {
    ElMessage.error('壁纸大小不能超过4MB')
    return false
  }
  return true
}

/**
 * 壁纸上传成功的事件
 * @param response
 */
const handleWallpaperSuccess = response => {
  store.addCustomWallpaper(response.retData)
  ElMessage({
    showClose: true,
    message: "上传成功",
    type: "success",
  })
}
</script>

<template>
  <el-scrollbar max-height="300px">
    <div class="wallpapers-wrapper">
      <h2 class="wallpapers-title">自定义</h2>
      <div class="wallpapers">
        <div
            class="wallpaper-wrapper"
            v-for="(item, index) in store.customWallpapers"
            :key="item.id"
            @click="handleClickWallpaper(index, 'custom')"
        >
          <div class="wallpaper">
            <img :src="`https://pandax.online/uploads/wallpapers/resized/${item.url}`"  alt=""/>
            <div class="wallpaper-mask" v-if="store.currentWallpaperUrl === `custom://${index}`">正在使用</div>
          </div>
        </div>
        <div
            class="wallpaper-wrapper"
        >
          <div class="wallpaper">
            <el-upload
                class="avatar-uploader"
                action="/api/setting/wallpaper"
                :show-file-list="false"
                :before-upload="beforeWallpaperUpload"
                :on-success="handleWallpaperSuccess"
                :headers="{Authorization: `Bearer ${store.token}`}"
                accept="image/*"
            >
              <el-icon class="avatar-uploader-icon"><Plus /></el-icon>
            </el-upload>
          </div>
        </div>
      </div>
      <h2 class="wallpapers-title">静态壁纸</h2>
      <div class="wallpapers">
        <div
            class="wallpaper-wrapper"
            v-for="(item, index) in store.staticWallpapers"
            :key="index"
            @click="handleClickWallpaper(index, 'static')"
        >
          <div class="wallpaper">
            <img :src="`/images/static/${item.url}`" alt="" />
            <div class="wallpaper-mask" v-if="store.currentWallpaperUrl === `static://${index}`">正在使用</div>
          </div>
        </div>
      </div>
      <h2 class="wallpapers-title">动态壁纸</h2>
      <div class="wallpapers">
        <div
            class="wallpaper-wrapper"
            v-for="(_, index) in store.dynamicWallpapers"
            :key="index"
            @click="handleClickWallpaper(index, 'dynamic')"
        >
          <div class="wallpaper">
            <img :src="`/images/dynamic/dynamic${index}.webp`" alt="" />
            <div class="wallpaper-mask" v-if="store.currentWallpaperUrl === `dynamic://${index}`">正在使用</div>
          </div>
        </div>
      </div>
    </div>
  </el-scrollbar>
</template>

<style lang="less" scoped>
.wallpapers-title {
  display: block;
  font-size: 20px;
  color: #000;
  font-weight: 600;
  margin: 5px 0 10px 5px;
}
.wallpapers+.wallpapers-title {
  margin-top: 20px;
}

.wallpapers-wrapper {
  overflow: hidden;

  .wallpapers {
    display: flex;
    flex-wrap: wrap;
    margin: 0 -4px -4px 0;

    .wallpaper-wrapper {
      width: calc(100% / 3);
      padding: 0 4px 4px 0;
      box-sizing: border-box;
      cursor: pointer;

      .wallpaper {
        overflow: hidden;
        border-radius: 4px;
        width: 100%;
        height: 0;
        padding-bottom: 56.25%;
        position: relative;

        .wallpaper-mask {
          pointer-events: none;
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          background-color: rgba(0, 0, 0, .45);
          color: white;
          font-size: 16px;
          display: flex;
          justify-content: center;
          align-items: center;
        }

        img, video {
          transition: 250ms;
          width: 100%;
          height: 100%;
          position: absolute;
          object-fit: cover;
          object-position: center;

          &:hover {
            transform: scale(1.15);
          }
        }
      }
    }
  }
}
</style>

<style>
.avatar-uploader {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.avatar-uploader .el-upload {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  transition: var(--el-transition-duration-fast);
  position: relative;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 100%;
  height: 100%;
  text-align: center;
}

.el-icon.avatar-uploader-icon:hover {
  color: var(--el-color-primary);
}
</style>